﻿<!doctype html>
<html>
<head>	
<meta charset="utf-8">
<title>jQuery个性圆圈倒计时特效 - 站长素材</title>

<!--[if IE]><script type="text/javascript" src="js/excanvas.js"></script><![endif]-->
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery.knob.min.js"></script>
<script src="js/jquery.ba-throttle-debounce.min.js"></script>
<script src="js/jquery.redcountdown.js"></script>
	
<style>
pre { max-width:100%; height:200px; overflow:scroll; border:1px solid #666; margin:0; }
body { font-family:'Open Sans'; font-weight:300; padding:0; margin:0;}
.redCountdownDemo { margin:0 auto 30px auto; max-width:800px; width:calc(100%;); padding:30px; display:block; }
section > .wrapper { max-width:800px; margin:0 auto; }
section.header { background:#e74c3c; color:#FFF; margin-bottom:30px; }
section.header > .wrapper {  padding:30px 0 30px; }
pre { margin-bottom:30px; }
pre.small { height:40px; overflow-y:hidden; }
h1 { font-size:42px;  font-weight:300; margin:0; }
h2 { font-size:30px;  font-weight:300; margin:0; }
#rC {  }
#rC_A { background:#FFF; border:1px solid #e74c3c;  }
#rC_F { background:rgb(52, 73, 94); border:1px solid rgb(52, 73, 94);  }
#rC_B { background:#222; border:1px solid #000;  }
#rC_PC { background:#222; border:1px solid #222;  }
#rC_PD { background:#222; border:1px solid #222;  }
#rC_PF { background:#222; border:1px solid #222;  }
#rC_PK { background:#222; border:1px solid #222;  }
#rC_E { background:#FFF; border:1px solid #e74c3c;   }
#rC_C { background:url('demo3.jpg') center center; background-size:cover; border:1px solid rgba(0,0,0,0); }
#rC_D { background:#3498db; border:1px solid rgba(0,0,0,0); }
b { font-weight:600!important; }
.options b { display:block; border-bottom:1px solid #666; margin-top:8px; }
</style>
	
</head>

<body>
<section class="header">
	<div style="padding:20px;"><div id="rC"></div></div>
</section>
<div id="rC_A" class="redCountdownDemo"></div>
<div id="rC_B" class="redCountdownDemo"></div>
<div id="rC_F" class="redCountdownDemo"></div>
<div id="rC_D" class="redCountdownDemo"></div>
<div id="rC_C" class="redCountdownDemo"></div>
<div id="rC_E" class="redCountdownDemo"></div>
<div id="rC_PA" class="redCountdownDemo"></div>
			<div id="rC_PB" class="redCountdownDemo"></div>
			<div id="rC_PE" class="redCountdownDemo"></div>
			<div id="rC_PJ" class="redCountdownDemo"></div>
			<div id="rC_PC" class="redCountdownDemo"></div>
			<div id="rC_PD" class="redCountdownDemo"></div>
			<div id="rC_PF" class="redCountdownDemo"></div>
			<div id="rC_PK" class="redCountdownDemo"></div>
			<div id="rC_PG" class="redCountdownDemo"></div>
			<div id="rC_PH" class="redCountdownDemo"></div>
			<div id="rC_PI" class="redCountdownDemo"></div>
			<div id="rC_PL" class="redCountdownDemo"></div>
<script type="text/javascript">
	$('#rC_PA').redCountdown({ preset: "flat-colors", end: $.now() + 10000 });
	$('#rC_PB').redCountdown({ preset: "flat-colors-fat", end: $.now() + 10000 });
	$('#rC_PE').redCountdown({ preset: "flat-colors-very-fat", end: $.now() + 10000 });
	$('#rC_PJ').redCountdown({ preset: "flat-colors-black", end: $.now() + 10000 });
	$('#rC').redCountdown({ preset: "white", end: $.now() + 645600 });
	$('#rC_PC').redCountdown({ preset: "white", end: $.now() + 10000 });
	$('#rC_PD').redCountdown({ preset: "white-fat", end: $.now() + 10000 });
	$('#rC_PF').redCountdown({ preset: "white-very-fat", end: $.now() + 10000 });
	$('#rC_PK').redCountdown({ preset: "white-black", end: $.now() + 10000 });
	$('#rC_PG').redCountdown({ preset: "black", style: { secondsElement: { gauge: { fgColor: "#F00" }}}, end: $.now() + 10000 });
	$('#rC_PH').redCountdown({ preset: "black-fat", labels: false, end: $.now() + 10000 });
	$('#rC_PI').redCountdown({ preset: "black-very-fat", labelsOptions: { lang: { days: 'D', hours: 'H', minutes: 'M', seconds: 'S' }, style: 'font-size:0.5em; text-transform:uppercase;'
		}, end: $.now() + 10000 });
	$('#rC_PL').redCountdown({ preset: "black-black", labelsOptions: { style: 'font-size:0.5em; text-transform:uppercase;' } , end: $.now() + 10000 });
	$('#rC_B').redCountdown({
		end: $.now() + 10000,
		labels: true,
		style: {
			element: "",
			textResponsive: .5,
			daysElement: {
				gauge: {
					thickness: .03,
					bgColor: "rgba(255,255,255,0.05)",
					fgColor: "#1abc9c"
				},
				textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#fff;'
			},
			hoursElement: {
				gauge: {
					thickness: .03,
					bgColor: "rgba(255,255,255,0.05)",
					fgColor: "#2980b9"
				},
				textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#fff;'
			},
			minutesElement: {
				gauge: {
					thickness: .03,
					bgColor: "rgba(255,255,255,0.05)",
					fgColor: "#8e44ad"
				},
				textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#fff;'
			},
			secondsElement: {
				gauge: {
					thickness: .03,
					bgColor: "rgba(255,255,255,0.05)",
					fgColor: "#f39c12"
				},
				textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#fff;'
			}
			
		},
		onEndCallback: function() { console.log("Time out!"); }
	});
	$('#rC_A').redCountdown({
		end: '1388468325',
		now: '1378441323',
		labels: true,
		style: {
			element: "",
			textResponsive: .5,
			daysElement: {
				gauge: {
					thickness: .01,
					bgColor: "rgba(0,0,0,0.05)",
					fgColor: "#1abc9c"
				},
				textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;'
			},
			hoursElement: {
				gauge: {
					thickness: .01,
					bgColor: "rgba(0,0,0,0.05)",
					fgColor: "#2980b9"
				},
				textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;'
			},
			minutesElement: {
				gauge: {
					thickness: .01,
					bgColor: "rgba(0,0,0,0.05)",
					fgColor: "#8e44ad"
				},
				textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;'
			},
			secondsElement: {
				gauge: {
					thickness: .01,
					bgColor: "rgba(0,0,0,0.05)",
					fgColor: "#f39c12"
				},
				textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;'
			}
			
		},
		onEndCallback: function() { console.log("Time out!"); }
	});
	
	$('#rC_E').redCountdown({
		end: '1388468325',
		now: '1380501323',
		labels: true,
		style: {
			element: "",
			textResponsive: .5,
			daysElement: {
				gauge: {
					thickness: .05,
					bgColor: "rgba(0,0,0,0)",
					fgColor: "#1abc9c",
					lineCap: 'round'
				},
				textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;'
			},
			hoursElement: {
				gauge: {
					thickness: .05,
					bgColor: "rgba(0,0,0,0)",
					fgColor: "#2980b9",						
					lineCap: 'round'
				},
				textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;'
			},
			minutesElement: {
				gauge: {
					thickness: .05,
					bgColor: "rgba(0,0,0,0)",
					fgColor: "#8e44ad",						
					lineCap: 'round'
				},
				textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;'
			},
			secondsElement: {
				gauge: {
					thickness: .05,
					bgColor: "rgba(0,0,0,0)",
					fgColor: "#f39c12",						
					lineCap: 'round'
				},
				textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;'
			}
			
		},
		onEndCallback: function() { console.log("Time out!"); }
	});
	
		
	$('#rC_D').redCountdown({
		end: '1397468325',
		now: '1388471324',
		labels: true,
		labelsOptions: {
			lang: {
				days: 'D',
				hours: 'H',
				minutes: 'M',
				seconds: 'S'
			},
			style: 'font-size:0.5em; text-transform:uppercase;'
		},
		style: {
			element: "",
			textResponsive: .5,
			daysElement: {
				gauge: {
					thickness: .02,
					bgColor: "rgba(255,255,255,0.1)",
					fgColor: "rgba(255,255,255,1)",
					lineCap: 'round'
				},
				textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'
			},
			hoursElement: {
				gauge: {
					thickness: .02,
					bgColor: "rgba(255,255,255,0.1)",
					fgColor: "rgba(255,255,255,1)",
					lineCap: 'round'
				},
				textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'
			},
			minutesElement: {
				gauge: {
					thickness: .02,
					bgColor: "rgba(255,255,255,0.1)",
					fgColor: "rgba(255,255,255,1)",
					lineCap: 'round'
				},
				textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'
			},
			secondsElement: {
				gauge: {
					thickness: .02,
					bgColor: "rgba(255,255,255,0.1)",
					fgColor: "rgba(255,255,255,1)",
					lineCap: 'round'
				},
				textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'
			},
			
		},
		onEndCallback: function() { console.log("Time out!"); }
	});
	
	$('#rC_C').redCountdown({
		end: '1390868325',
		now: '1388461323',
		labels: true,
		labelsOptions: {
			lang: {
				days: 'Dni',
				hours: 'Godzin',
				minutes: 'Minut',
				seconds: 'Sekund'
			},
			style: 'font-size:0.5em; text-transform:uppercase;'
		},
		style: {
			element: "",
			textResponsive: .5,
			daysElement: {
				gauge: {
					thickness: .2,
					bgColor: "rgba(255,255,255,0.05)",
					fgColor: "rgba(255,255,255,0.2)",
					lineCap: 'round'
				},
				textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'
			},
			hoursElement: {
				gauge: {
					thickness: .2,
					bgColor: "rgba(255,255,255,0.05)",
					fgColor: "rgba(255,255,255,0.2)",
					lineCap: 'round'
				},
				textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'
			},
			minutesElement: {
				gauge: {
					thickness: .2,
					bgColor: "rgba(255,255,255,0.05)",
					fgColor: "rgba(255,255,255,0.2)",
					lineCap: 'round'
				},
				textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'
			},
			secondsElement: {
				gauge: {
					thickness: .2,
					bgColor: "rgba(255,255,255,0.05)",
					fgColor: "rgba(255,255,255,0.2)",
					lineCap: 'round'
				},
				textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'
			}
			
		},
		onEndCallback: function() { console.log("Time out!"); }
	});
	
	$('#rC_F').redCountdown({
		end: '1390868325',
		now: '1388461323',
		labels: true,
		labelsOptions: {
			lang: {
				days: 'Dni',
				hours: 'Godzin',
				minutes: 'Minut',
				seconds: 'Sekund'
			},
			style: 'font-size:0.5em; text-transform:uppercase;'
		},
		style: {
			element: "",
			textResponsive: .5,
			daysElement: {
				gauge: {
					thickness: .2,
					bgColor: "rgba(255,255,255,0.2)",
					fgColor: "rgb(241, 196, 15)"
				},
				textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'
			},
			hoursElement: {
				gauge: {
					thickness: .2,
					bgColor: "rgba(255,255,255,0.2)",
					fgColor: "rgb(241, 196, 15)"
				},
				textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'
			},
			minutesElement: {
				gauge: {
					thickness: .2,
					bgColor: "rgba(255,255,255,0.2)",
					fgColor: "rgb(241, 196, 15)"
				},
				textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'
			},
			secondsElement: {
				gauge: {
					thickness: .2,
					bgColor: "rgba(255,255,255,0.2)",
					fgColor: "rgb(241, 196, 15)"
				},
				textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'
			}
			
		},
		onEndCallback: function() { console.log("Time out!"); }
	});
	
</script>
</div></section>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>
